<template>
  <div>
    <div class="boss1">
      <div class="c1">
        <el-table style="width: 100%" :data="spxq">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="全部商品" width="650" prop="pic">
            <template slot-scope="scope">
              <img :src="scope.row.img" width="80px" height="80px" style="vertical-align: middle;">
              <span style="margin-left: 20px;">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="市场价" width="150">
            <template slot-scope="scope">
              <span style="color: red;">￥{{ scope.row.jiage }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.num == 0" @click="jian(scope.row)"
                style="width: 20px;height:20px;margin-left: -9px;" type="primary">-</el-button>
              <span style="margin-left: 5px;">{{ scope.row.num }}</span>
              <el-button @click="jia(scope.row)" style="width: 20px;height:20px;margin-left: 8px;"
                type="primary">+</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="del(scope.row.gid)" type="text" size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="c2">
        <span style="padding-right: 270px;line-height: 70px;">总计：<span
            style="color: red;font-size: 20px;">￥{{ tatal }}</span></span>
        <el-button type="success" @click="put">结算</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import httpApi from '@/myaxios';
export default {
  data() {
    return {
      num: 1,
      xinxi: [],
      spxq: [],
      ddxq:[],
      sid:'',

    };
  },
  computed: {
    // 总价叠加
    tatal() {
      let jiage = 0
      this.spxq.forEach(i => {
        jiage += i.jiage * i.num
      })
      return jiage
    }
  },
  methods: {
    // 结算
    deleteAll(index) {
      this.chanpin.splice(index)
      this.$message({
        type: 'success',
        offset: '340',
        message: '结算完成'
      });
    },
    // 调取数据渲染到页面
    xuanran() {
      // 通过网址的id取到数据
      let uid = this.$route.params.id
      // 通过backuser.js文件方法
      httpApi.BackUser.queryByUid({ uid }).then(res => {
        this.xinxi=res.data
        console.log('xinxi:',this.xinxi)
        // 整行循环到页面
        for (let i = 0; i <this.xinxi.length; i++) {
          httpApi.commodity.queryById({ id: this.xinxi[i].cid }).then(res => {
            res.data[0].gid = this.xinxi[i].id
            res.data[0].num = this.xinxi[i].num
            this.spxq.push(res.data[0])
          })
        }
        console.log('spxq:',this.spxq);
      })
    },
    del(id){
      // 通过API.commodity.js文件.方法.返还.
      httpApi.commodity.deleteById(id).then(res=>{
        alert ('删除成功')
        // 这个.spxq数组
        this.spxq = []
        // 重新调用this.xuanran（）
        this.xuanran()
      })
    },
    // 数量增加
    jia(i){
      console.log(i)
      i.num++
      let cid = i.id
      let uid = this.$route.params.id
      let num = i.num
      let id = i.gid
      httpApi.commodity.gouwuchenumById({id,cid,num,uid}).then(res=>{
        return
      })
    },
    // 数量减少
    jian(i){
      i.num--
      let cid = i.id
      let uid = this.$route.params.id
      let num = i.num
      let id = i.gid
      httpApi.commodity.gouwuchenumById({id,cid,num,uid}).then(res=>{
        return
      })
    },
    put(){
         httpApi.commodity.queryAllDingdan().then(res=>{
          let a = res.data.length-1
          this.sid = Number(res.data[a].id)+1
          console.log('this.sid',this.sid)
          let uid = this.xinxi[0].uid
          let cid = this.xinxi[0].cid
          let num = this.xinxi[0].num
          let gid = this.xinxi[0].id
          // console.log(this.sid);
          console.log('uid',uid);
          console.log('cid',cid);
          console.log('num',num);
          console.log('gid',gid);
          httpApi.commodity.getDingDan({id:this.sid,uid,cid,num}).then(res=>{
            alert ('结算成功')
          })
          httpApi.commodity.deleteById(gid).then(res=>{
            this.spxq = []
            this.xuanran()
        })
      })
    }
  },
  mounted() {
    this.xuanran()
    
  },
  updated(){
    
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.boss1 {
  width: 1200px;
  margin: 0 auto;

}

.c1 {
  background-color: rgba(0, 0, 0, 0.3);
  // margin-left: 350px;
  width: 1200px;
}

.c2 {
  width: 1200px;
  height: 70px;
  margin-left: 300px;

  button {
    width: 130px;
    height: 50px;
  }
}
</style>
